<template>
<!-- 动态 class -->
<!-- 两种情况:
    1. 绑定对象(常用) 判断是否应用指定类名
      { 类名: 是否应用这个类名 }
    2. 绑定数组 应用多个类名
      [ '类名1', '类名2', ... ]
 -->
  <!-- <div :class="{ red: age < 18 }"> -->
  <div :class="arr">
    你好世界!
    <button @click="arr.push('mid')">点我加类名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      arr: [ 'red', 'small' ]
    }
  }
}
</script>

<style>
div {
  width: 200px;
  height: 200px;
  background-color: yellow;
  font-size: 36px;
}
.red {
  color: red
}
.small {
  font-size: 8px;
}
</style>